<template>
  <div class="main">
    <PureTableBar class="list_hei" title="信用评级模型列表">
      <template #buttons>
        <el-button type="primary" @click="tLoding = true"> 新建模型 </el-button>
      </template>
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading" size="small"
          ref="tableRef" :data="dataList" :columns="columns" :checkList="checkList" :pagination="pagination"
          max-height="600" :row-selection="true" @current-change="handleCurrentChange" @size-change="handleSizeChange"
          :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }">
          <template #operation="{ row }">
            <el-button type='primary' text @click="checkPor(row)">
              查看详情
            </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
  </div>
  <div class="show_Echar" v-if="tLoding">
    <div class="container">
      <div class="left-panel">
        <el-tabs tab-position="left" style="height: 100%" @tab-click="handleClick" v-model="activeTab">
          <el-tab-pane v-for="item in algorithmList" :label="item.dictName" :key="item.dictName" :name="item.dictName"
            :disabled="!!detailData">
            <div style="height: 100%; display: flex; flex-direction: column;overflow: scroll;">
              <Draggle :showType="activeTab" :data="paramsList" class="flexible-panel" :showId="item.dictId"
                :detailData="detailData" v-if="activeTab == item.dictName" @closeNew="tLoding = false"></Draggle>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { usePortrait } from "./hooks/FincialcreditRatingModel";
import { PureTableBar } from "@/components/RePureTableBar";
import Draggle from "./component/Draggle.vue"
const {
  columns,
  loading,
  dataList,
  pagination,
  tLoding,
  algorithmList,
  paramsList,
  showModel,
  activeTab,
  handleSizeChange,
  handleCurrentChange,
  handleCancelShowChart,
  handleClick,
  checkPor,
  detailData,
} = usePortrait()
</script>

<style lang="scss" scoped>
@import url(@/style/CreditComm.scss);


// .main {
//   position: relative;
//   height: 100% !important;

// }

.show_Echar {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  background-color: white;
  top: 0;
  z-index: 10;
  overflow: scroll;

  ._Echar_colse {
    position: absolute;
    right: 20px;
    top: 20px;

  }

  .echartes {
    width: 91%;
    height: 400px;
    margin: auto;
  }

  .echartstitle {
    text-align: center;
    font-size: 12px;
    padding: 10px 0;
    margin: 15px 0;
  }
}

.container {
  height: 100%;
  display: flex;
}

.left-panel {
  flex: 15%;
}

.flexible-panel {
  flex: 1;
}


.top-title {
  margin-right: 2px
}

.itxst {
  margin: 10px auto;
  width: 30%;
  float: left;
  margin-right: 10px;
  min-height: 120px
}

.itxst div {
  padding: 6px;
  background-color: #fdfdfd;
  border: solid 1px #eee;
  margin-bottom: 10px;
  cursor: move;
}

#msg {
  clear: both;
  width: 100%;
}
</style>
